<template>
<div>
  <h1>ref 函数的使用</h1>
  <hr />
  <ul>
    <li>  {{ count }}</li>
    <li>
      <button @click="add">点击+1</button>
    </li>
    <li> {{ obj.name }} </li>
    <li>
       <button @click="changeObj"> 点击改头换面</button>
       </li>
    <li> {{ list}}</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    // 简单类型
    const count = ref(0)
    // 点击+1
    const add = () => {
      count.value++
    }
    // 2.复杂类型
    const obj = ref({
      name: '小明'
    })
    const list = ref([1, 2, 3])
    const changeObj = () => {
      // obj.value.name = '小红'
      // obj.value = {
      //   age: 100
      // }
      list.value.push(Math.random() * 1000)
    }
    return {
      count, add, obj, changeObj, list
    }
  }
}
</script>
<style lang="sass" scoped>

</style>
